<template>
	<view class="content column">
		<view class="url">
			<uv-input placeholder="请输入需要生成二维码的内容" border="surround" v-model="url"></uv-input>
		</view>
		<view class="code center">
			<uv-qrcode v-if="url.length>0" ref="qrcode" size="200px" :value="url" :options="optionsConfig"></uv-qrcode>
		</view>
		
		<view class="btn">
			
			<uv-button type="primary" @click="download()"  text="下载二维码"></uv-button>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '', //二维码地址
				optionsConfig: {
					areaColor: '#FFFFFF',
					backgroundColor: 'rgba(255,255,255,0)', //二维码背景色
					backgroundImageSrc: '', //二维码背景图片地址
					foregroundColor: '#000000', //二维码前景色
					foregroundImageSrc: '', //二维码前景图片地址
					backgroundImageAlpha: 1, //指定图片不透明度
					foregroundImageBackgroundColor: '#FFFFFF', //指定二维码前景图的背景颜色
				}

			}
		},
		methods: {
			download() {
				this.$refs.qrcode.save({
					success: (res) => {
						uni.showModal({
							content:'保存到相册成功!'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.url{
		height: 50px;
		margin-top: 20px;
	}
	.code{
		height: 300px;
		border-radius: 5px;
		border: 1px solid #aaff00;
	}
	.btn{
		padding: 100px;
	}
</style>